<template>
    <div class="container block">
        <div class="seize row">
            <div class="num-time-left"></div>
            <div class="num-time">
                <span v-if="isEnterpriseProjectType === 'all'">
                    <span class="detail-key">项目总数：</span>
                    <span class="detail-value">{{ projectCount }}</span>
                    <span class="detail-key">打卡人数：</span>
                    <span class="detail-value">{{ peopleCount }}</span>
                </span>
              <span v-if="isEnterpriseProjectType === 'not'">
                    <span class="detail-key">派遣单位总数：</span>
                    <span class="detail-value">{{ serveCompanyCount }}</span>
                    <span class="detail-key">打卡人数：</span>
                    <span class="detail-value">{{ servePeopleCount }}</span>
                </span>
                <span class="detail-value">
                    <el-date-picker
                        v-model="projectTime"
                        type="daterange"
                        class="date-solt point"
                        unlink-panels
                        range-separator="至"
                        :start-placeholder="defaultStart"
                        :end-placeholder="defaultEnd"
                        :shortcuts="shortcuts"
                        @change="choiceTimeSection"
                        style="width:241px;margin-right:0"
                    />
                </span>
                <div class="search">
                    <!-- 请输入人员/派遣单位名称 -->
                    <input
                        type="text"
                        :placeholder="
                            isEnterpriseProjectType === 'all'
                                ? '请输入项目/派遣单位名称'
                                : isEnterpriseProjectType === 'not'
                                ? '请输入派遣单位名称'
                                : '请输入人员/派遣单位名称'
                        "
                        class="input search-input"
                        v-model="searchProjectText"
                        style="width:176px"
                        @keydown.enter="projectSearch"
                    />
                    <button class="btn" @click="projectSearch">搜索</button>
                    <button class="btn-white" @click="onProjectReset">
                        重置
                    </button>
                </div>
            </div>
        </div>
        <el-tabs model-value="all" @tab-click="handleClick">
            <el-tab-pane label="按项目" name="all">
                <div class="table">
                    <el-table
                        :data="tableProjectData"
                        style="width: 100%"
                        :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }"
                        empty-text="请选择日期查看考勤"
                    >
                        <!-- <el-table-column type="selection" /> -->
                        <el-table-column prop="projectName" label="项目名" />
                        <el-table-column
                            prop="serveCompanyName"
                            label="派遣单位名"
                        />
                        <el-table-column
                            prop="signTimeStart"
                            label="上班时间"
                            :formatter="
                                (row:{signTimeStart:string}) =>
                                    row.signTimeStart
                                        ? row.signTimeStart
                                        : '暂无'
                            "
                        />
                        <el-table-column
                            prop="signTimeEnd"
                            label="下班时间"
                            :formatter="
                                (row:{signTimeEnd:string}) =>
                                    row.signTimeEnd ? row.signTimeEnd : '暂无'
                            "
                        />
                        <el-table-column
                            prop="dayNightFlag"
                            label="班次"
                            :formatter="
                                (row:{dayNightFlag:number}) =>
                                    row.dayNightFlag === 0 ? '白班' : '夜班'
                            "
                        />
                        <el-table-column
                            prop="pwCount"
                            label="打卡人数"
                            :formatter="
                                (row:{pwCount:string}) => (row.pwCount ? row.pwCount : '暂无')
                            "
                        />
                        <el-table-column
                            prop="createUserName"
                            label="项目创建人"
                            :formatter="
                                (row:{createUserName:string}) =>
                                    row.createUserName
                                        ? row.createUserName
                                        : '暂无'
                            "
                        />
                        <el-table-column
                            prop="signInType"
                            label="打卡方式"
                            :formatter="
                                (row:{signInMode:Number,signInType:string}) =>
                                    row.signInMode === 0 ? '拍照打卡' : row.signInType ? 'ibeacon打卡' : '地理位置打卡'
                            "
                        />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <p
                                    style="color:#1989FA"
                                    class="point"
                                    @click="
                                        onGoProjectDetail(
                                            scope.row.id,
                                            scope.row.serveCompanyName,
                                            scope.row.projectName
                                        )
                                    "
                                >
                                    查看详情
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        class="pagination"
                        v-model:currentPage="projectPageNum"
                        v-model:page-size="projectPageSize"
                        :page-sizes="[10, 30, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="projectTotal"
                        @size-change="projectSizeChange"
                        @current-change="projectHandleChange"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="按派遣单位" name="not">
                <div class="table">
                    <el-table
                        :data="tableEnterpriseData"
                        style="width: 100%"
                        :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }"
                        empty-text="请选择日期查看考勤"
                    >
                        <!-- <el-table-column type="selection" />    -->
                        <el-table-column
                            prop="serveCompanyName"
                            label="派遣单位名"
                        />
                        <el-table-column prop="projectCount" label="项目数" />
                        <el-table-column
                            prop="pwCount"
                            label="打卡人数"
                            :formatter="
                                (row:{pwCount:string}) => (row.pwCount ? row.pwCount : '暂无')
                            "
                        />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <p
                                    style="color:#1989FA"
                                    class="point"
                                    @click="
                                        onGoCompanyDetail(
                                            scope.row.serveCompanyId,
                                            scope.row.serveCompanyName,
                                            scope.row.projectName
                                        )
                                    "
                                >
                                    查看详情
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        class="pagination"
                        v-model:currentPage="enterpriseaPageNum"
                        v-model:page-size="enterpriseaPageSize"
                        :page-sizes="[10, 30, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="enterpriseaTotal"
                        @size-change="enterpriseSizeChange"
                        @current-change="companyHandleChange"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="按个人" name="alone">
                <div class="table">
                    <el-table
                        :data="aloneList"
                        style="width: 100%"
                        :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }"
                        empty-text="请选择日期查看个人信息"
                    >
                        <!-- <el-table-column type="selection" />    -->
                        <el-table-column prop="userName" label="姓名" />
                        <el-table-column prop="idCardNo" label="身份证" />
                        <el-table-column
                            prop="ppCount"
                            label="项目次数"
                            :formatter="
                                (row:{ppCount:string}) => (row.ppCount ? row.ppCount : '暂无')
                            "
                        />
                        <el-table-column prop="signDayCount" label="打卡天数" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <p
                                    style="color:#1989FA"
                                    class="point"
                                    @click="
                                        onGoAloneDetail(
                                            scope.row.userId,
                                            scope.row.userName,
                                            scope.row.idCardNo
                                        )
                                    "
                                >
                                    查看详情
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        class="pagination"
                        v-model:currentPage="alonePageNum"
                        v-model:page-size="alonePageSize"
                        :page-sizes="[10, 30, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="aloneTotal"
                        @size-change="aloneSizeChange"
                        @current-change="getAloneQuery"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ProjectDto } from '@/api/dto'
import { getSignTopNum } from '@/api/sign'
import { getSignProjectList } from '@/api/project'
import {
    getSignEnterpriseList,
    EnterpriseDto,
    getSignAloneList
} from '@/api/enterprise'
import { dateFormat } from '@/utils/util'
import { shortcuts } from '@/utils/global'
import { ElMessage } from 'element-plus'
export default defineComponent({
    name: 'Sign',
    data () {
        return {
            active: '全部',
            projectTotal: 0,
            enterpriseaTotal: 0,
            projectPageSize: 10,
            projectPageNum: 1,
            searchProjectText: '',
            enterpriseaPageSize: 10,
            enterpriseaPageNum: 1,
            searchEnterpriseaText: '',
            tableProjectData: [] as ProjectDto[],
            tableEnterpriseData: [] as EnterpriseDto[],
            peopleCount: 0,
            projectCount: 0,
            // new Date().toLocaleDateString().split('/').join('-').split('-')[0] + '-' + new Date().toLocaleDateString().split('/').join('-').split('-')[1] + '-01',
            defaultStart: dateFormat('YY-mm', new Date()) + '-01',
            // new Date().toLocaleDateString().split('/').join('-'),
            defaultEnd: dateFormat('YY-mm-dd', new Date()),
            beginCreateTime: '', // 开始日期
            endCreateTime: '', // 结束日期
            shortcuts: shortcuts.slice(0, 3),
            isEnterpriseProjectType: 'all',
            projectTime: '',
            enterpriseTime: '',
            alonePageNum: 1,
            alonePageSize: 10,
            aloneList: [] as EnterpriseDto[],
            aloneTotal: 0,
            serveCompanyCount: 0,
            servePeopleCount: 0
        }
    },
    async created () {
        getSignTopNum({
            queryType: 0,
            beginCreateTime: this.defaultStart,
            endCreateTime: this.defaultEnd
        }).then(res => {
            this.peopleCount = res.peopleCount
            this.projectCount = res.projectCount
        })
        // await this.companyHandleChange()
        await this.projectHandleChange()
        // await this.getAloneQuery()
    },
    methods: {
        async companyHandleChange () {
            // if (!this.projectTime) {
            //     ElMessage({ message: '请选择时间', type: 'warning' })
            //     return
            // }
            var resEnd = new Date().toLocaleDateString().split('/').join('-') // 只包含日期
            console.log(resEnd, '只包含日期')
            var resStart = resEnd.split('-')[0] + '-' + resEnd.split('-')[1] + '-01'
            console.log(resStart, '只包含日期')
            const result = await getSignEnterpriseList({
                beginCreateTime: this.projectTime ? this.beginCreateTime : resStart,
                endCreateTime: this.projectTime ? this.endCreateTime : resEnd,
                pageNum: this.enterpriseaPageNum,
                pageSize: this.enterpriseaPageSize,
                searchText: this.searchProjectText
            })
            this.tableEnterpriseData = result.list
            this.enterpriseaTotal = result.total
        },
        async projectHandleChange () {
            // if (!this.projectTime) {
            //     ElMessage({ message: '请选择时间', type: 'warning' })
            //     return
            // }
            var resEnd = new Date().toLocaleDateString().split('/').join('-') // 只包含日期
            console.log(resEnd, '只包含日期')
            var resStart = resEnd.split('-')[0] + '-' + resEnd.split('-')[1] + '-01'
            console.log(resStart, '只包含日期')
            const result = await getSignProjectList({
                beginCreateTime: this.projectTime ? this.beginCreateTime : resStart,
                endCreateTime: this.projectTime ? this.endCreateTime : resEnd,
                pageNum: this.projectPageNum,
                pageSize: this.projectPageSize,
                searchText: this.searchProjectText
            })
            this.projectTotal = result.total
            this.tableProjectData = result.list
        },
        async getAloneQuery () {
            // if (!this.projectTime) {
            //     ElMessage({ message: '请选择时间', type: 'warning' })
            //     return
            // }
            var resEnd = new Date().toLocaleDateString().split('/').join('-') // 只包含日期
            console.log(resEnd, '只包含日期')
            var resStart = resEnd.split('-')[0] + '-' + resEnd.split('-')[1] + '-01'
            console.log(resStart, '只包含日期')
            const result = await getSignAloneList({
                beginCreateTime: this.projectTime ? this.beginCreateTime : resStart,
                endCreateTime: this.projectTime ? this.endCreateTime : resEnd,
                pageNum: this.alonePageNum,
                pageSize: this.alonePageSize,
                searchText: this.searchProjectText
            })
            this.aloneTotal = result.total
            this.aloneList = result.list
        },
        choiceTimeSection () {
            console.log('清空了吗')
            // console.log(this.projectTime, '清空了吗')
            if (this.projectTime) {
                const startTime = new Date(this.projectTime[0]).getTime()
                const endTime = new Date(this.projectTime[1]).getTime()
                if (endTime - startTime > 2592000000) {
                    ElMessage({
                        message: '最多只能选择31天',
                        type: 'warning'
                    })
                    this.projectTime = ''
                    return
                }
                this.beginCreateTime = dateFormat(
                    'YY-mm-dd',
                    new Date(this.projectTime[0])
                )
                this.endCreateTime = dateFormat(
                    'YY-mm-dd',
                    new Date(this.projectTime[1])
                )
                console.log(this.beginCreateTime, '开始的时间', this.endCreateTime, '结束的实际')
            }
        },
        projectSizeChange () {
            this.projectPageNum = 1
            this.projectHandleChange()
        },
        enterpriseSizeChange () {
            this.enterpriseaPageNum = 1
            this.companyHandleChange()
        },
        // 个人换条数
        aloneSizeChange () {
            this.alonePageNum = 1
            this.getAloneQuery()
        },
        // 点击项目进入详情
        onGoProjectDetail (id: string, title: string, name: string) {
            // if (!this.projectTime) {
            //     ElMessage({
            //         message: '请选择时间',
            //         type: 'warning'
            //     })
            //     return
            // }
            if (this.projectTime) {
                this.$router.push({
                    path:
                '/sign/detail/' +
                this.beginCreateTime +
                '/' +
                this.endCreateTime +
                '/' +
                encodeURIComponent(title) +
                '/' +
                encodeURIComponent(name) +
                '/' +
                id +
                '/' +
                '0'
                })
            } else {
                this.$router.push({
                    path:
                '/sign/detail/' +
                this.defaultStart +
                '/' +
                this.defaultEnd +
                '/' +
                encodeURIComponent(title) +
                '/' +
                encodeURIComponent(name) +
                '/' +
                id +
                '/' +
                '0'
                })
            }
        },
        onGoCompanyDetail (id: string, title: string, name: string) {
            // if (!this.projectTime) {
            //     ElMessage({
            //         message: '请选择时间',
            //         type: 'warning'
            //     })
            //     return
            // }
            if (!this.projectTime) {
                this.$router.push({
                    path:
                '/sign/detail/' +
                this.defaultStart +
                '/' +
                this.defaultEnd +
                '/' +
                title +
                '/' +
                name +
                '/' +
                id +
                '/' +
                '1'
                })
            } else {
                this.$router.push({
                    path:
                '/sign/detail/' +
                this.beginCreateTime +
                '/' +
                this.endCreateTime +
                '/' +
                title +
                '/' +
                name +
                '/' +
                id +
                '/' +
                '1'
                })
            }
        },
        onGoAloneDetail (id: string, title: string, name: string) {
            // if (!this.projectTime) {
            //     ElMessage({
            //         message: '请选择时间',
            //         type: 'warning'
            //     })
            //     return
            // }
            if (this.projectTime) {
                this.$router.push({
                    path:
                '/sign/detail/' +
                this.beginCreateTime +
                '/' +
                this.endCreateTime +
                '/' +
                title +
                '/' +
                name +
                '/' +
                id +
                '/' +
                '2'
                })
            } else {
                this.$router.push({
                    path:
                '/sign/detail/' +
                this.defaultStart +
                '/' +
                this.defaultEnd +
                '/' +
                title +
                '/' +
                name +
                '/' +
                id +
                '/' +
                '2'
                })
            }
        },
        async handleClick (event: { props: { name: string } }) {
            console.log(event.props.name, '切换的内容是什么')
            this.isEnterpriseProjectType = event.props.name
            if (event.props.name === 'all') {
                const result = await getSignTopNum({
                    queryType: 0,
                    beginCreateTime: this.beginCreateTime ? this.beginCreateTime : this.defaultStart,
                    endCreateTime: this.endCreateTime ? this.endCreateTime : this.defaultEnd
                })
                this.peopleCount = result.peopleCount
                this.projectCount = result.projectCount
            }
            if (event.props.name === 'not') {
                const result = await getSignTopNum({
                    queryType: 1,
                    beginCreateTime: this.beginCreateTime ? this.beginCreateTime : this.defaultStart,
                    endCreateTime: this.endCreateTime ? this.endCreateTime : this.defaultEnd
                })
                this.servePeopleCount = result.peopleCount
                this.serveCompanyCount = result.serveCompanyCount
                await this.companyHandleChange()
            }
            if (event.props.name === 'alone') {
                await this.getAloneQuery()
            }
        },
        async projectSearch () {
            if (this.isEnterpriseProjectType === 'all') {
                this.projectPageNum = 1
                this.projectHandleChange()
                const result = await getSignTopNum({
                    queryType: 0,
                    beginCreateTime: this.beginCreateTime ? this.beginCreateTime : this.defaultStart,
                    endCreateTime: this.endCreateTime ? this.endCreateTime : this.defaultEnd
                })
                this.peopleCount = result.peopleCount
                this.projectCount = result.projectCount
            } else if (this.isEnterpriseProjectType === 'not') {
                this.enterpriseaPageNum = 1
                this.companyHandleChange()
                const result = await getSignTopNum({
                    queryType: 1,
                    beginCreateTime: this.beginCreateTime ? this.beginCreateTime : this.defaultStart,
                    endCreateTime: this.endCreateTime ? this.endCreateTime : this.defaultEnd
                })
                this.servePeopleCount = result.peopleCount
                this.serveCompanyCount = result.serveCompanyCount
            } else {
                this.alonePageNum = 1
                this.getAloneQuery()
            }
            // this.projectHandleChange()
        },
        onProjectReset () {
            this.searchProjectText = ''
            // this.projectSearch()
            this.tableProjectData = []
            this.projectTime = ''
        },
        enterpriseSearch () {
            this.enterpriseaPageNum = 1
            this.companyHandleChange()
        },
        onEnterpriseReset () {
            this.searchEnterpriseaText = ''
            // this.enterpriseSearch()
            this.tableEnterpriseData = []
            this.enterpriseTime = ''
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.block
    padding: 10px 24px 0;
    position relative
:deep().date-solt
    width 241px
    margin-right 20px
.operation
    .btn,.btn-green
        width 113px
        height 40px
        margin-left 20px

:deep().el-tabs__header.is-top
    display inline-block
:deep().el-tabs__nav-scroll
    padding-right 20px
.seize
    display flex
    justify-content space-between
    align-items flex-start
    position absolute
    right 20px
    top 10px
.num-time-left
    width 300px
    height 40px
    flex-shrink 1
.num-time
    display: flex
    align-items: center
</style>
